React路由篇:路由跳转以及带参的三种方式(react

2024-07-13 01:39| 来源: 网络整理| 查看: 265

当查询信息,总有需要带上参数才能精准查询到自己想要的信息. 举个例子: 我要查询类别为笔记的的备忘录信息时,查询时需要带上t_event_noteClassify=“笔记”;

代码目录结构在这里插入图片描述

Ⅰ-params参数

路由声明格式

//路由链接(携带参数)：详情 //注册路由(声明接收)： Route, NavLink, Switch } from 'react-router-dom'; import './index.css'; import First from '../../views/First'; import Two from '../../views/Two'; import Three from '../../views/Three'; import Four from '../../views/Four' export default function HeadNav(props: any) { const params = { name: 'lin', userid: '9012222222222e' } return ( params.name}/${params.userid}`} activeClassName='selectedHead'>首页二页散页肆页 Two}> Four}> ) }

src\views\First\index.tsx 在这里插入图片描述

跳转至的组件(First)接收参数如下

props.match.params

在这里插入图片描述

Ⅱ-search参数

路由声明格式

//路由链接(携带参数)： params.name}&userid=${params.userid}`}>详情 //注册路由(无需声明，正常注册即可)： console.log('two', props); return( Two组件 ) }

跳转至的组件(Two)接收参数如下

props.location props.location.search

在这里插入图片描述

Ⅲ-state参数

路由声明格式

//路由链接(携带参数)： pathname:/index/three',state:{name:params.name,userid:params.userid}}}>详情 //注册路由(无需声明，正常注册即可)： console.log('三组件', props); return( 这是Ⅲ页 ) }

跳转至的组件(Three)接收参数如下

props.location props.location.state

在这里插入图片描述

以上便是路由的跳转传参的三种方式.针对的是声明是路由.

【本文地址】

公司简介

联系我们